<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <input type="text" v-model="msg">
        <input type="text" v-model="comMsg"> -->
        <!-- <button @click="fn1">修改msg</button>
        <button @click="fn2">修改comMsg</button> -->

        <!-- <div>{{ msg }}</div>
        <div>{{ comMsg }}</div> -->


        <input type="checkbox" v-model="chkAll">全选

        <hr>
        <div  v-for="item in list">
            <input v-model="item.isCheck" type="checkbox"> {{ item.name }}
        </div>

 
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '你好',
                list: [
                    { name: '唱', isCheck: false },
                    { name: '跳', isCheck: false },
                    { name: 'rap', isCheck: false },
                    { name: '打篮球', isCheck: false },
                ]
            },
            computed: {
                chkAll : {
                    get () {
                        console.log('对我取值了')
                        return this.list.every(v => v.isCheck)
                    },
                    set (val) {
                        console.log('对我赋值了', val)
                        this.list.forEach(v => v.isCheck = val)
                    }
                },
                // comMsg() {

                //     return this.msg + '，xxx'
                // }
                // comMsg: {
                //     // 对计算属性取值
                //     get () {
                //         console.log('我取值了')
                //         return this.msg + '，xxx'
                //     },

                //     // 对计算属性赋值
                //     set (val) {
                //         console.log('对计算属性赋值', val)
                //     }
                // }
            },

            methods: {
                fn1 () {
                    this.msg = 'hello'
                },

                fn2 () {
                    // 如果要对计算属性赋值，那么得写完整的计算属性写法
                    this.comMsg = ',world'
                }
            }
        })
    </script>
</body>

</html>